<#import "themes/${theme}/macro/frontCurrentPosition.ftl" as frontCurrentPosition />
<!DOCTYPE html>
<html>
    <head>
        <title>${getSite(siteId).name}-${curColumn.name}</title>

		<meta name="description" content="${curColumn.description}" />
		<meta name="keywords" content="${curColumn.keywords}" />
		<script type="text/javascript">
			var validateForm;
			function doSubmit(){
				if(validateForm.form()){
				  	jpf.loading();
				  	${"$"}("#inputForm").submit();
				  	return true;
				}
				return false;
			}

			${"$"}(document).ready(function() {
				validateForm = ${"$"}("#inputForm").validate({
					submitHandler: function(form){
						jpf.post("${ctxFrt}/guestbook/save",$('#inputForm').serialize(),function(data){
							if(data.success){
		                    	jpf.success(data.msg);
		                    	var columnId = ${"$"}("#inputForm  input[name='column.id']").val();
		                    	var openFlag = ${"$"}("#inputForm  input[name='openFlag']").val();
		                    	${"$"}("#inputForm  input").val("");
		                    	${"$"}("#inputForm  textarea").val("");
		                    	${"$"}("#inputForm  input[name='column.id']").val(columnId);
		                    	${"$"}("#inputForm  input[name='openFlag']").val(openFlag);
		                    	${"$"}('.validateCode').attr('src','${pageContext.request.contextPath}/servlet/validateCodeServlet?'+new Date().getTime());
		                    }else{
	            	  			jpf.error(data.msg);
		                    }
						})
					},
					rules: {
						validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
					},
					messages: {
						validateCode: {remote: "验证码不正确！", required: "请填写验证码！"}
					},
					errorContainer: "#messageBox",
					errorPlacement: function(error, element) {
						${"$"}("#messageBox").text("输入有误，请先更正。");
						if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
							error.appendTo(element.parent().parent());
						} else {
							error.insertAfter(element);
						}
					}
				});

			});

		</script>
    </head>
    <body>
        <!-- 导航 -->
        <@frontCurrentPosition.content curColumn />

        <!-- Contact Us -->
        <div class="contact-us-container">
        	<div class="container">
	            <div class="row">
	                <div class="col-sm-7 contact-form wow fadeInLeft">
	                    <p style="width:95%;">
							倾我所有，尽我所能，竭诚为您，是我们永恒的主题！<br>
							万事俱备，不欠东风，只欠您的来信！<br>
							我们时刻准备着......
	                    </p>
	                    <form:form id="inputForm" modelAttribute="inputGuestbook" action="#">
	                    	<sys:message content="${message}"/>
	                    	<input type="hidden" id="column.id" name="column.id" value="${curColumn.id}">
	                    	<input type="hidden" id="openFlag" name="openFlag" value="0">
	                    	<div class="form-group">
	                    		<label for="name"><font color="red">*</font> 您的姓名</label>
	                        	<form:input path="name" placeholder="请输入您的姓名、昵称或单位名称！" class="required"
	                        			    htmlEscape1="false" maxlength="64"  minlength="1"/>
	                        </div>
	                    	<div class="form-group">
	                    		<label for="email"><font color="red">*</font> 您的邮箱</label>
	                        	<form:input path="email" placeholder="请输入您的邮箱，我们将通过此邮箱给您回复！" class="required email"
	                        			    htmlEscape="false"/>
	                        </div>
	                        <div class="form-group">
	                        	<label for="title"><font color="red">*</font> 留言标题</label>
	                        	<form:input path="title" placeholder="请输入您的留言主题！" class="required"
	                        			    htmlEscape="false"  maxlength="255"  minlength="2"/>
	                        </div>
	                        <div class="form-group">
	                        	<label for="content"><font color="red">*</font> 留言内容</label>
	                        	<form:textarea path="content" placeholder="请描述您的留言内容！" class="required"
											htmlEscape="false" maxlength="1024"  minlength="2" />
	                        </div>
	                        <div class="form-group">
								<label for="validateCode"><font color="red">*</font> 验证码:</label>
								<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:5px;width:95%;"/>
							</div>
	                        <button type="button" class="btn" onclick="doSubmit()">提交</button>
	                    </form:form>
	                </div>
	                <div class="col-sm-5 contact-address wow fadeInUp">
	                    <h3>我们在这里</h3>
	                    <div class="map" id="map"></div>
	                    <h3><p><i class="fa fa-map-marker"></i>
                        	<span class="contact-address-title">地址：</span>
                        	<span>${getSite(siteId).address}</span>
                        </p></h3>
                        <p><i class="fa fa-phone"></i>
                        	<span class="contact-address-title">电话：</span>
                        	<span>${getSite(siteId).phone}</span>
                        </p>
                        <p><i class="fa fa-weixin"></i>
                        	<span class="contact-address-title">微信：</span>
                        	<span>${getSite(siteId).wechat}</span>
                        	<img onclick="jpf.showPic('${getSite(siteId).wechatQrcode}')"
                        		 src="${getSite(siteId).wechatQrcode}">
                        	<i>单击小图放大扫码</i>
                        </p>
                        <p><i class="fa fa-qq"></i>
                        	<span class="contact-address-title">QQ：</span>
                        	<span>${getSite(siteId).qq}</span>
                        </p>
                        <p><i class="fa fa-envelope"></i>
                        	<span class="contact-address-title">Email：</span>
                        	<span>${getSite(siteId).email}</span>
                        </p>
	                </div>
	            </div>
	        </div>
        </div>

		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${getConfig('baiduAk')}"></script>
		<script type="text/javascript">
			//百度地图API
			//使用容器ID初始化地图对象
			var map = new BMap.Map("map");
			//设置地图中心坐标和地图级别，没有具体坐标可使用中文城市名设置
			if(site.longitude != "" && site.latitude != ""){
				map.centerAndZoom(new BMap.Point(site.longitude,site.latitude),11);
			}else{
				map.centerAndZoom("海南",12);
			}
			//启用滚动轮缩放
			map.enableScrollWheelZoom(true);

			if(site.longitude != "" && site.latitude != ""){
				//标注
				//清除地图中所有覆盖物对象
				map.clearOverlays();
				//创建标点
				var point = new BMap.Point(site.longitude,site.latitude);
				//创建标注
				var marker = new BMap.Marker(point);
				//将标注添加到地图中
				map.addOverlay(marker);
				//map.panTo(point);
				//跳动的动画
				marker.setAnimation(BMAP_ANIMATION_BOUNCE);
			}
		</script>

    </body>
</html>
